import React from "react";
import { useNavigate } from "react-router-dom";
import { Toast, NavBar } from "react-vant";
import axios from "../../aixos/request";
import "./login.css";

export default function Login() {
  const navigate = useNavigate();
  const from = {
    mobile: "",
    code: "",
  };
  const ok = async () => {
    let res = await axios.post("/v1_0/authorizations", from);
    console.log(res);
    if (res.status === 201) {
      Toast.success("登录成功");
      localStorage.setItem("token", res.data.data.token);
      localStorage.setItem("refreshToken", res.data.data.refresh_token);
      navigate("/my");
    } else {
      Toast.fail("登录失败1");
    }
  };
  return (
    <div>
      <NavBar
        title=""
        leftText=""
        onClickLeft={() => {
          navigate("/my");
        }}
      />
      <div className="app1">
        <div>
          <h3>短信登录</h3>
        </div>
        <div className="form">
          <div className="form-item">
            <input
              type="text"
              placeholder="请输入手机号"
              className="van-field__control"
              onChange={(e) => {
                from.mobile = e.target.value;
              }}
              rules={[
                {
                  required: true,
                  message: "清楚输入手机号",
                },
              ]}
            />
          </div>
          <div className="form-item">
            <input
              type="text"
              placeholder="请输入验证码"
              className="van-field__control"
              onChange={(e) => {
                from.code = e.target.value;
              }}
              rules={[
                {
                  required: true,
                  message: "清楚输入验证码",
                },
              ]}
            />
            <div className="van-field__button">
              <span onClick={() => Toast("验证码已发送")}>获取验证码</span>
            </div>
          </div>
        </div>
        <button className="van-button" onClick={() => ok()}>
          <div className="van-button__content">
            <span>登录</span>
          </div>
        </button>
      </div>
    </div>
  );
}
